/*

Please don't edit this file directly.
Instead, edit the stylus (.styl) files and compile it to CSS on your machine.

*/
/* ----------------------------------------------------------------------------
 * Fonts
 */
 @import url("//fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300");
 /* ----------------------------------------------------------------------------
  * Base
  */
 html,
 body,
 div,
 span,
 applet,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 a,
 abbr,
 acronym,
 address,
 big,
 cite,
 code,
 del,
 dfn,
 em,
 img,
 ins,
 kbd,
 q,
 s,
 samp,
 small,
 strike,
 strong,
 sub,
 sup,
 tt,
 var,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-weight: inherit;
   font-style: inherit;
   font-family: inherit;
   font-size: 100%;
   vertical-align: baseline;
 }
 body {
   line-height: 1;
   color: #000;
   background: #fff;  /* 网页背景色 */
   /* background: #c21f1f;  网页背景色 */
 }
 ol,
 ul {
   list-style: none;
 }
 table {
   border-collapse: separate;
   border-spacing: 0;
   vertical-align: middle;
 }
 caption,
 th,
 td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle;
 }
 a img {
   border: none;
 }
 html,
 body {
   height: 100%;
 }
 html {
   overflow-x: hidden;
 }
 body,
 td,
 textarea,
 input {
   font-family: Helvetica Neue, Open Sans, sans-serif;
   line-height: 1.6;
   font-size: 13px;
   color: #505050;
 }
 @media (max-width: 480px) {
   body,
   td,
   textarea,
   input {
     font-size: 12px;
   }
 }
 a {
   color: #2badad;
   text-decoration: none;
 }
 a:hover {
   color: #228a8a;
 }
 /* ----------------------------------------------------------------------------
  * Content styling
  */
 .content p,
 .content ul,
 .content ol,
 .content h1,
 .content h2,
 .content h3,
 .content h4,
 .content h5,
 .content h6,
 .content pre,
 .content blockquote {
   padding: 10px 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 .content h1,
 .content h2,
 .content h3,
 .content h4,
 .content h5,
 .content h6 {
   font-weight: bold;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
 .content pre {
   font-family: Menlo, monospace;
 }
 .content ul > li {
   list-style-type: disc;
 }
 .content ol > li {
   list-style-type: decimal;
 }
 .content ul,
 .content ol {
   margin-left: 20px;
 }
 .content ul > li {
   list-style-type: none;
   position: relative;
 }
 .content ul > li:before {
   content: '';
   display: block;
   position: absolute;
   left: -17px;
   top: 7px;
   width: 5px;
   height: 5px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   background: #fff;
   border: solid 1px #9090aa;
 }
 .content li > :first-child {
   padding-top: 0;
 }
 .content strong,
 .content b {
   font-weight: bold;
 }
 .content i,
 .content em {
   font-style: italic;
   color: #9090aa;
 }
 .content code {
   font-family: Menlo, monospace;
   background: #f3f6fb;
   padding: 1px 3px;
   font-size: 0.95em;
 }
 .content pre > code {
   display: block;
   background: transparent;
   font-size: 0.96em;  /* 0.85em */
   letter-spacing: -0.5px;  /* -1px */
 }
 .content blockquote :first-child {
   padding-top: 0;
 }
 .content blockquote :last-child {
   padding-bottom: 0;
 }
 .content table {
   margin-top: 10px;
   margin-bottom: 10px;
   padding: 0;
   border-collapse: collapse;
   clear: both;
 }
 .content table tr {
   border-top: 1px solid #ccc;
   background-color: #fff;
   margin: 0;
   padding: 0;
 }
 .content table tr :nth-child(2n) {
   background-color: #f8f8f8;
 }
 .content table tr th {
   text-align: auto;
   font-weight: bold;
   border: 1px solid #ccc;
   margin: 0;
   padding: 6px 13px;
 }
 .content table tr td {
   text-align: auto;
   border: 1px solid #ccc;
   margin: 0;
   padding: 6px 13px;
 }
 .content table tr th :first-child,
 .content table tr td :first-child {
   margin-top: 0;
 }
 .content table tr th :last-child,
 .content table tr td :last-child {
   margin-bottom: 0;
 }
 /* ----------------------------------------------------------------------------
  * Content
  */
 .content-root {
   min-height: 90%;
   position: relative;
 }
 .content {
   padding-top: 30px;
   padding-bottom: 40px;
   padding-left: 40px;
   padding-right: 40px;
   zoom: 1;
   max-width: 700px;
 }
 .content:before,
 .content:after {
   content: "";
   display: table;
 }
 .content:after {
   clear: both;
 }
 .content blockquote {
   color: #9090aa;
   text-shadow: 0 1px 0 rgba(255,255,255,0.5);
 }
 .content h1,
 .content h2,
 .content h3 {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family: montserrat;
   padding-bottom: 0;
 }
 .content h1 + p,
 .content h2 + p,
 .content h3 + p,
 .content h1 ul,
 .content h2 ul,
 .content h3 ul,
 .content h1 ol,
 .content h2 ol,
 .content h3 ol {
   padding-top: 10px;
 }
 .content h1,
 .content h2 {
   text-transform: uppercase;
   letter-spacing: 1px;
   font-size: 1.5em;
 }
 .content h3 {
   font-size: 1.2em;
 }
 .content h1,
 .content h2,
 .content .big-heading,
 body.big-h3 .content h3 {
   padding-top: 80px;
 }
 .content h1:before,
 .content h2:before,
 .content .big-heading:before,
 body.big-h3 .content h3:before {
   display: block;
   content: '';
   background: -webkit-gradient(linear, left top, right top, color-stop(0.8, #dfe2e7), color-stop(1, rgba(223,226,231,0)));
   background: -webkit-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0) 100%);
   background: -moz-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0) 100%);
   background: -o-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0) 100%);
   background: -ms-linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0) 100%);
   background: linear-gradient(left, #dfe2e7 80%, rgba(223,226,231,0) 100%);
   -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.4);
   box-shadow: 0 1px 0 rgba(255,255,255,0.4);
   height: 1px;
   position: relative;
   top: -40px;
   left: -40px;
   width: 100%;
 }
 @media (max-width: 768px) {
   .content h1,
   .content h2,
   .content .big-heading,
 body.big-h3 .content h3 {
     padding-top: 40px;
   }
   .content h1:before,
   .content h2:before,
   .content .big-heading:before,
 body.big-h3 .content h3:before {
     background: #dfe2e7;
     left: -40px;
     top: -20px;
     width: 120%;
   }
 }
 .content h4,
 .content h5,
 .content .small-heading,
 body:not(.big-h3) .content h3 {
   border-bottom: solid 1px rgba(0,0,0,0.07);
   color: #9090aa;
   padding-top: 30px;
   padding-bottom: 10px;
 }
 body:not(.big-h3) .content h3 {
   font-size: 0.9em;
 }
 .content h1:first-child {
   padding-top: 0;
 }
 .content h1:first-child,
 .content h1:first-child a,
 .content h1:first-child a:visited {
   color: #505050;
 }
 .content h1:first-child:before {
   display: none;
 }
 @media (max-width: 768px) {
   .content h4,
   .content h5,
   .content .small-heading,
   body:not(.big-h3) .content h3 {
     padding-top: 20px;
   }
 }
 @media (max-width: 480px) {
   .content {
     padding: 20px;
     padding-top: 40px;
   }
   .content h4,
   .content h5,
   .content .small-heading,
   body:not(.big-h3) .content h3 {
     padding-top: 10px;
   }
 }
 body.no-literate .content pre > code {
   background: #f3f6fb;
   border: solid 1px #e7eaee;
   border-top: solid 1px #dbdde2;
   border-left: solid 1px #e2e5e9;
   display: block;
   padding: 10px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   overflow: auto;
 }
 body.no-literate .content pre > code {
   -webkit-overflow-scrolling: touch;
 }
 body.no-literate .content pre > code::-webkit-scrollbar {
   width: 15px;
   height: 15px;
 }
 body.no-literate .content pre > code::-webkit-scrollbar-thumb {
   background: #ddd;
   -webkit-border-radius: 8px;
   border-radius: 8px;
   border: solid 4px #f3f6fb;
 }
 body.no-literate .content pre > code:hover::-webkit-scrollbar-thumb {
   background: #999;
   -webkit-box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
   box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
 }
 @media (max-width: 1180px) {
   .content pre > code {
     background: #f3f6fb;
     border: solid 1px #e7eaee;
     border-top: solid 1px #dbdde2;
     border-left: solid 1px #e2e5e9;
     display: block;
     padding: 10px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
     overflow: auto;
   }
   .content pre > code {
     -webkit-overflow-scrolling: touch;
   }
   .content pre > code::-webkit-scrollbar {
     width: 15px;
     height: 15px;
   }
   .content pre > code::-webkit-scrollbar-thumb {
     background: #ddd;
     -webkit-border-radius: 8px;
     border-radius: 8px;
     border: solid 4px #f3f6fb;
   }
   .content pre > code:hover::-webkit-scrollbar-thumb {
     background: #999;
     -webkit-box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
     box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
   }
 }
 .button {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family: montserrat, sans-serif;
   letter-spacing: -1px;
   font-weight: bold;
   display: inline-block;
   padding: 3px 25px;
   border: solid 2px #2badad;
   -webkit-border-radius: 20px;
   border-radius: 20px;
   margin-right: 15px;
 }
 .button,
 .button:visited {
   background: #2badad;
   color: #fff;
   text-shadow: none;
 }
 .button:hover {
   border-color: #111;
   background: #111;
   color: #fff;
 }
 .button.light,
 .button.light:visited {
   background: transparent;
   color: #9090aa;
   border-color: #9090aa;
   text-shadow: none;
 }
 .button.light:hover {
   border-color: #9090aa;
   background: #9090aa;
   color: #fff;
 }
 .content .button + em {
   color: #9090aa;
 }
 @media (min-width: 1180px) {
   body:not(.no-literate) .content-root {
     background-color: #f3f6fb;
     -webkit-box-shadow: inset 780px 0 #fff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0,0,0,0.1);
     box-shadow: inset 780px 0 #fff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0,0,0,0.1);
   }
 }
 @media (min-width: 1180px) {
   body:not(.no-literate) .content {
     padding-left: 0;
     padding-right: 0;
     width: 930px;
     max-width: none;
   }
   body:not(.no-literate) .content > p,
   body:not(.no-literate) .content > ul,
   body:not(.no-literate) .content > ol,
   body:not(.no-literate) .content > h1,
   body:not(.no-literate) .content > h2,
   body:not(.no-literate) .content > h3,
   body:not(.no-literate) .content > h4,
   body:not(.no-literate) .content > h5,
   body:not(.no-literate) .content > h6,
   body:not(.no-literate) .content > pre,
   body:not(.no-literate) .content > blockquote {
     width: 550px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     padding-right: 40px;
     padding-left: 40px;
   }
   body:not(.no-literate) .content > h1,
   body:not(.no-literate) .content > h2,
   body:not(.no-literate) .content > h3 {
     clear: both;
     width: 100%;
   }
   body:not(.no-literate) .content > pre,
   body:not(.no-literate) .content > blockquote {
     width: 380px;
     padding-left: 20px;
     padding-right: 20px;
     float: right;
     clear: right;
   }
   body:not(.no-literate) .content > pre + p,
   body:not(.no-literate) .content > blockquote + p,
   body:not(.no-literate) .content > pre + ul,
   body:not(.no-literate) .content > blockquote + ul,
   body:not(.no-literate) .content > pre + ol,
   body:not(.no-literate) .content > blockquote + ol,
   body:not(.no-literate) .content > pre + h4,
   body:not(.no-literate) .content > blockquote + h4,
   body:not(.no-literate) .content > pre + h5,
   body:not(.no-literate) .content > blockquote + h5,
   body:not(.no-literate) .content > pre + h6,
   body:not(.no-literate) .content > blockquote + h6 {
     clear: both;
   }
   body:not(.no-literate) .content > p,
   body:not(.no-literate) .content > ul,
   body:not(.no-literate) .content > ol,
   body:not(.no-literate) .content > h4,
   body:not(.no-literate) .content > h5,
   body:not(.no-literate) .content > h6 {
     float: left;
     clear: left;
   }
   body:not(.no-literate) .content > h4,
   body:not(.no-literate) .content > h5,
   body:not(.no-literate) .content > .small-heading,
   body:not(.big-h3) body:not(.no-literate) .content > h3 {
     margin-left: 40px;
     width: 470px;
     margin-bottom: 3px;
     padding-left: 0;
     padding-right: 0;
   }
   body:not(.no-literate) .content > table {
     margin-left: 40px;
     margin-right: 40px;
     max-width: 470px;
   }
   body:not(.no-literate):not(.big-h3) .content > h3 {
     margin-left: 40px;
     width: 470px;
     margin-bottom: 3px;
     padding-left: 0;
     padding-right: 0;
   }
 }
 .header {
   background: #f3f6fb;
   text-shadow: 0 1px 0 rgba(255,255,255,0.5);
   border-bottom: solid 1px #dfe2e7;
   padding: 15px 15px 15px 30px;
   zoom: 1;
   line-height: 20px;
   position: relative;
 }
 .header:before,
 .header:after {
   content: "";
   display: table;
 }
 .header:after {
   clear: both;
 }
 .header .left {
   float: left;
 }
 .header .right {
   text-align: right;
   position: absolute;
   right: 15px;
   top: 15px;
 }
 .header .right iframe {
   display: inline-block;
   vertical-align: middle;
 }
 .header h1 {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-weight: bold;
   font-family: montserrat, sans-serif;
   font-size: 13px;
 }
 .header h1,
 .header h1 a,
 .header h1 a:visited {
   color: #9090aa;
 }
 .header h1 a:hover {
   color: #505050;
 }
 .header li a {
   font-size: 0.88em;
   color: #9090aa;
   display: block;
 }
 .header li a:hover {
   color: #3a3a44;
 }
 @media (min-width: 480px) {
   .header h1 {
     float: left;
   }
   .header ul,
   .header li {
     display: block;
     float: left;
   }
   .header ul {
     margin-left: -15px;
   }
   .header h1 + ul {
     border-left: solid 1px #dfe2e7;
     margin-left: 15px;
   }
   .header li {
     border-left: solid 1px rgba(255,255,255,0.5);
     border-right: solid 1px #dfe2e7;
   }
   .header li:last-child {
     border-right: 0;
   }
   .header li a {
     padding: 0 15px;
   }
 }
 @media (max-width: 480px) {
   .right {
     display: none;
   }
 }
 .menubar {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
 .menubar .section {
   padding: 30px 30px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 .menubar .section + .section {
   border-top: solid 1px #dfe2e7;
 }
 .menubar .section.no-line {
   border-top: 0;
   padding-top: 0;
 }
 a.big.button {
   display: block;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   width: 100%;
   padding: 10px 20px;
   text-align: center;
   font-weight: bold;
   font-size: 1.1em;
   background: transparent;
   border: solid 3px #2badad;
   -webkit-border-radius: 30px;
   border-radius: 30px;
   font-family: montserrat, sans-serif;
 }
 a.big.button,
 a.big.button:visited {
   color: #2badad;
   text-decoration: none;
 }
 a.big.button:hover {
   background: #2badad;
 }
 a.big.button:hover,
 a.big.button:hover:visited {
   color: #fff;
 }
 @media (max-width: 480px) {
   .menubar {
     padding: 20px;
     border-bottom: solid 1px #dfe2e7;
   }
 }
 @media (max-width: 768px) {
   .menubar {
     display: none;
   }
 }
 @media (min-width: 768px) {
   .content-root {
     padding-left: 230px;
   }
   .menubar {
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 230px;
     border-right: solid 1px #dfe2e7;
   }
   .menubar.fixed {
     position: fixed;
     overflow-y: auto;
   }
   .menubar.fixed {
     -webkit-overflow-scrolling: touch;
   }
   .menubar.fixed::-webkit-scrollbar {
     width: 15px;
     height: 15px;
   }
   .menubar.fixed::-webkit-scrollbar-thumb {
     background: #ddd;
     -webkit-border-radius: 8px;
     border-radius: 8px;
     border: solid 4px #fff;
   }
   .menubar.fixed:hover::-webkit-scrollbar-thumb {
     background: #999;
     -webkit-box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
     box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
   }
 }
 .menubar {
   font-size: 0.9em;
 }
 .menu ul.level-1 > li + li {
   margin-top: 20px;
 }
 .menu a {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   position: relative;
   display: block;
   padding-top: 1px;
   padding-bottom: 1px;
   margin-right: -30px;
 }
 .menu a,
 .menu a:visited {
   color: #2badad;
 }
 .menu a:hover {
   color: #228a8a;
 }
 .menu a.level-1 {
   font-family: montserrat, sans-serif;
   text-transform: uppercase;
   font-size: 0.9em;
   font-weight: bold;
 }
 .menu a.level-1,
 .menu a.level-1:visited {
   color: #9090aa;
 }
 .menu a.level-1:hover {
   color: #565666;
 }
 .menu a.level-2 {
   font-weight: normal;
 }
 .menu a.level-3 {
   font-weight: normal;
   font-size: 0.9em;
   padding-left: 10px;
 }
 .menu a.active {
   font-weight: bold !important;
 }
 .menu a.active,
 .menu a.active:visited,
 .menu a.active:hover {
   color: #505050 !important;
 }
 .menu a.active:after {
   content: '';
   display: block;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   position: absolute;
   top: 10px;
   right: 30px;
   width: 9px;
   height: 3px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   background: #2badad;
 }
 code .string,
 code .number {
   color: #3ac;
 }
 code .init {
   color: #383;
 }
 code .keyword {
   font-weight: bold;
 }
 code .comment {
   color: #adadcc;
 }
 .large-brief .content > h1:first-child + p,
 .content > p.brief {
   font-size: 1.3em;
   font-family: Open Sans, sans-serif;
   font-weight: 300;
 }
 .title-area {
   min-height: 100px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   text-align: center;
   border-bottom: solid 1px #dfe2e7;
   overflow: hidden;
 }
 .title-area > img.bg {
   z-index: 0;
   position: absolute;
   left: -9999px;
 }
 .title-area > div {
   position: relative;
   z-index: 1;
 }

 .theme {
  /* text-align: right; */
  position: absolute;
  right: 12%;
  top: 50%;
  display: inline-block;
  background: #f3f6fb;
  color: #505050;
  background-image: url("");
  background-size: 100%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  background-color: transparent;
  cursor: pointer;
}
 